<template>
  <div>
    <template v-if="data.length == 0">
      <div style="margin: 100px auto">
        <el-empty description="暂无数据" />
      </div>
    </template>
    <div v-else class="list">
      <div class="list-half" v-for="(v, k) in cloumns" :key="k">
        <div class="item" @click.stop="detail(item)" v-for="(item, index) in data.filter((s, j) => j % cloumns == k)"
          :key="index">
          <img class="card" :src="baseApi + item.ThumbnailsFileUrl" />
          <div class="mask">
            <div class="person">
              <div class="avatar">
                <img :src="item.UploadUserHeader
                  ? baseApi + item.UploadUserHeader
                  : baseApi + 'UserHeader\\20230214105739655.jpg'
                  " alt="" />
              </div>
              <div class="name">
                {{ item.UploadUserName }}
              </div>
            </div>
            <div class="like" @click.stop="like(item)" v-if="!item.Is_DianZan">
              <img src="@/assets/icon/zan.png" alt="" />
            </div>
            <div class="like" @click.stop="unlike(item)" v-if="item.Is_DianZan">
              <img src="@/assets/icon/zan-fill.png" alt="" />
            </div>
            <div class="collect" v-if="!item.Is_ShouCang" @click.stop="collect(item)">
              <img src="@/assets/icon/collect.png" alt="" />
            </div>
            <div class="collect" v-if="item.Is_ShouCang" @click.stop="uncollect(item)">
              <img src="@/assets/icon/collect-fill.png" alt="" />
            </div>
            <div class="down" @click.stop="downLoad(baseApi + item.ThumbnailsFileUrl, item)">
              <img src="@/assets/icon/down.png" alt="" />
            </div>
          </div>
          <div v-if="showLike">点赞人数：{{ getLikeNums(item) }}</div>
        </div>
        <!-- <img class="wf-img" :src="baseApi + v.ThumbnailsFileUrl" alt="" />
        <div class="mask">
          <div class="like" @click.stop="collect(v)" v-if="!v.Is_ShouCang">
            <img src="@/assets/icon/zan.png" alt="" />
          </div>
          <div class="like" @click.stop="uncollect(v)" v-if="v.Is_ShouCang">
            <img src="@/assets/icon/zan-fill.png" alt="" />
          </div>
          <div
            class="down"
            @click.stop="downLoad(baseApi + v.ThumbnailsFileUrl, v)"
          >
            <img src="@/assets/icon/down.png" alt="" />
          </div>
        </div> -->
      </div>
    </div>
    <div class="dialog" v-if="showDialog" @click.self="closeDialog">
      <div class="close" @click="closeDialog">
        <img src="@/assets/icon/close.png" alt="" />
      </div>
      <div class="inner">
        <div class="header">
          <div class="left">
            <User :user="detailImg.info" />
          </div>
          <div class="right">
            <!-- <div class="item">
              <img src="@/assets/icon/collect.png" alt="" />
              收藏
            </div> -->
            <div class="item" @click="collect(detailImg.info)" v-if="!detailImg.info.Is_ShouCang">
              <img src="@/assets/icon/collect.png" alt="" />
              收藏
            </div>
            <div class="item" @click="uncollect(detailImg.info)" v-if="detailImg.info.Is_ShouCang">
              <img src="@/assets/icon/collect-fill.png" alt="" />
              取消收藏
            </div>
            <div class="collect" v-if="!detailImg.info.Is_DianZan" @click.stop="like(detailImg.info)">
              <img src="@/assets/icon/zan.png" alt="" />
              点赞
            </div>
            <div class="collect" v-if="detailImg.info.Is_DianZan" @click.stop="unlike(detailImg.info)">
              <img src="@/assets/icon/zan-fill.png" alt="" />
              取消点赞
            </div>
            <div class="item" @click="
              downLoad(
                baseApi + detailImg.info.ThumbnailsFileUrl,
                detailImg.info
              )
              ">
              <img src="@/assets/icon/down.png" alt="" />
              下载
            </div>
          </div>
        </div>
        <div class="picbox" @click="lookBigPic" @mousedown="imgDown">
          <img v-if="!lookBig" :src="baseApi + detailImg.info.WatermarkFileUrl" class="normal" alt="" />
          <div class="bigbox" v-show="lookBig">
            <img :src="baseApi + detailImg.info.WatermarkFileUrl" class="big" alt="" />
          </div>
        </div>
        <div class="tips">
          <div class="module">

            <div class="tags">
              <div>
                <img src="@/assets/icon/tag.png" style="width: 60px; object-fit: cover" alt="" />
                ：
              </div>
              <div class="item"
                v-for="(v, k) in (detailImg.info.IntellectualTag + ',' + detailImg.info.CustomizingTag).split(',')"
                :key="k">
                {{ v }}
              </div>
            </div>
            <div class="right">
              <div class="place">
                <img src="@/assets/icon/position.png" style="width: 36px; object-fit: cover; margin-right: 14px" alt="" />
                <span>{{ detailImg.info.Address }}</span>
              </div>
            </div>
          </div>

          <div class="module">
            <div class="desc">
              <div>
                <img src="@/assets/desc.png" style="width:30px;object-fit: cover;" alt=""> <span
                  style="font-size:14px;font-weight:600">描述</span> ：
              </div>
              <span>{{ detailImg.info.Description || '暂无描述' }}</span>
            </div>
            <div class="right">
              <div class="desc">
                <div>
                  <img src="@/assets/logo.png" style="width:30px;object-fit: cover;margin-right: 14px;" alt="">
                </div>
                <span>{{ detailImg.info.ThemeName || '暂无描述' }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="navs">
          <div
            class="item"
            v-for="(v, k) in navs.list"
            :key="k"
            @click="changeTheme(v)"
          >
            {{ v.ThemeName }}
          </div>
        </div> -->
        <b style="margin-left: 50px; font-size: 20px">更多相似内容</b>
        <div class="list">
          <div class="list-half" v-for="(v, k) in 4" :key="k">
            <div class="item" @click.stop="detail(item)" v-for="(item, index) in data.filter((s, j) => j % 4 == k)"
              :key="index">
              <img class="card" :src="baseApi + item.ThumbnailsFileUrl" />
              <div class="mask">
                <div class="person">
                  <div class="avatar">
                    <img :src="item.UploadUserHeader
                      ? baseApi + item.UploadUserHeader
                      : baseApi + 'UserHeader\\20230214105739655.jpg'
                      " alt="" />
                  </div>
                  <div class="name">
                    {{ item.UploadUserName }}
                  </div>
                </div>
                <div class="like" @click.stop="collect(item)" v-if="!item.Is_ShouCang">
                  <img src="@/assets/icon/zan.png" alt="" />
                </div>
                <div class="like" @click.stop="uncollect(item)" v-if="item.Is_ShouCang">
                  <img src="@/assets/icon/zan-fill.png" alt="" />
                </div>
                <div class="down" @click.stop="downLoad(baseApi + item.ThumbnailsFileUrl, item)">
                  <img src="@/assets/icon/down.png" alt="" />
                </div>
                <div class="collect" v-if="!item.Is_DianZan" @click.stop="like(item)">
                  <img src="@/assets/icon/collect.png" alt="" />
                </div>
                <div class="collect" v-if="item.Is_DianZan" @click.stop="unlike(item)">
                  <img src="@/assets/icon/collect-fill.png" alt="" />
                </div>
              </div>
            </div>
            <!-- <img class="wf-img" :src="baseApi + v.ThumbnailsFileUrl" alt="" />
        <div class="mask">
          <div class="like" @click.stop="collect(v)" v-if="!v.Is_ShouCang">
            <img src="@/assets/icon/zan.png" alt="" />
          </div>
          <div class="like" @click.stop="uncollect(v)" v-if="v.Is_ShouCang">
            <img src="@/assets/icon/zan-fill.png" alt="" />
          </div>
          <div
            class="down"
            @click.stop="downLoad(baseApi + v.ThumbnailsFileUrl, v)"
          >
            <img src="@/assets/icon/down.png" alt="" />
          </div>
        </div> -->
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="授权" width="30%" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="是否商用">
          <el-select v-model="state.isbus">
            <el-option label="非商用" :value="0"></el-option>
            <el-option label="商用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请理由">
          <el-input type="textarea" v-model="state.resaon" placeholder="请输入申请理由"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmApply">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import User from "./user2.vue";
import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  getCurrentInstance,
  toRaw,
} from "vue";
import * as CollectApi from "@/api/collect";
import { storeUser } from "@/store/user";
import { storeLogin } from "@/store/login";
import { ElMessageBox, ElNotification } from "element-plus";
import * as HomeApi from "@/api/home";
import bus from "../utils/bus";
import Avatar from '@/assets/pics/avatar.png'
export default defineComponent({
  name: "waterfell-horizontal",
  components: {
    User,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    data2: {
      type: Array,
      default: () => [],
    },
    cloumns: {
      type: Number,
      default: 3,
    },
    showLike: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update"],
  setup(props, ctx) {
    const user = storeUser();
    const login = storeLogin();
    let $this = getCurrentInstance().appContext.config.globalProperties;
    let noScroll =
      getCurrentInstance().appContext.config.globalProperties.noScroll;
    let canScroll =
      getCurrentInstance().appContext.config.globalProperties.canScroll;
    const showDialog = ref(false);
    const detailImg = reactive({
      info: {},
    });
    const textarea = ref('')
    const lookBig = ref(false);
    const dialogVisible = ref(false);
    const navs = reactive({
      list: [],
    });
    const transY = ref(0);
    const detail = async (v) => {
      await HomeApi.read({
        PictureID: v.PictureID,
      });
      detailImg.info = v;
      noScroll();
      showDialog.value = true;
      nextTick(() => {
        document.querySelector(".dialog").scrollTop = 0;
      });
    };
    const closeDialog = () => {
      showDialog.value = false;
      canScroll();
    };
    let now = {
      x: 0,
      y: 0,
    };
    const state = reactive({
      current: {},
      resaon: '',
      isbus: 0
    })
    const imgDown = (e) => {
      transY.value = 0;
      lookBig.value = !lookBig.value;
      now = {
        x: e.x,
        y: e.y,
      };
      setTimeout(() => {
        let box = document.querySelector(".picbox");
        let big = document.querySelector('.bigbox')
        let rat = (now.y - 150) / 600;
        transY.value = rat * big.clientHeight;
        box.scrollTop = transY.value
      });
    };
    watch(
      () => props.data,
      (v) => {
        if (detailImg.info && detailImg.info.PictureID) {
          let i = v.findIndex((s) => s.PictureID == detailImg.info.PictureID);
          detailImg.info = v[i];
        }
      },
      { deep: true }
    );
    let timer = null;
    const moveImg = (e) => {
      if (!lookBig) return;
      nextTick(() => {
        let big = document.querySelector(".big");
        let box = document.querySelector('.picbox')
        // console.log(e.y)
        let trans = -transY.value + (now.y - e.y) * 4;
        // console.log(trans)
        // console.log(big.clientHeight)
        let height = box.clientHeight
        let y = e.y - 120
        console.log(height / 2 - y)
        big.style.transform = `translateY(${trans}px)`;
      });
    };
    const downLoad = async (e, v) => {
      if (!user.UserId) {
        login.setLogin(true);
        return;
      }
      state.current = v
      if (!v.Is_Enpower) {
        dialogVisible.value = true
        // ElMessageBox.confirm("暂无权限下载，是否申请授权？", "授权", {
        //   type: "info",
        //   confirmButtonText: '申请',
        //   cancelButtonText: '取消'
        // }).then(async () => {

        // });
        return;
      }
      let { data } = await HomeApi.getOrigin({
        PictureID: v.PictureID,
        UserAccount: user.UserAccount,
      });
      var downloadElement = document.createElement("a");
      downloadElement.download = v.PictureName;
      downloadElement.href = $this.baseApi + data.UserData;
      downloadElement.click();
      window.URL.revokeObjectURL(downloadElement.href);
    };
    onMounted(() => {
      canScroll();
      document.onkeydown = (e) => {
        if (e.keyCode == 27) {
          closeDialog();
        }
      };
    });
    const collect = async (v) => {
      if (!user.UserId) {
        login.setLogin(true);
        return;
      }
      let { data } = await CollectApi.collect({
        CurrentUserAccount: user.UserAccount,
        PictureIDs: v.PictureID,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "success",
        title: "收藏",
        message: "收藏成功！",
      });
      ctx.emit("update");
    };
    const uncollect = async (v) => {
      if (!user.UserId) {
        login.setLogin(true);
        return;
      }
      let { data } = await CollectApi.cancel({
        CurrentUserAccount: user.UserAccount,
        PictureIDs: v.PictureID,
      });
      if (data.Status != 0) return;
      ctx.emit("update");
    };
    const like = async (v) => {
      if (!user.UserId) {
        login.setLogin(true);
        return;
      }
      let { data } = await CollectApi.like({
        CurrentUserAccount: user.UserAccount,
        PictureID: v.PictureID,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "success",
        title: "点赞",
        message: "点赞成功！",
      });
      ctx.emit("update");
    };
    const unlike = async (v) => {
      if (!user.UserId) {
        login.setLogin(true);
        return;
      }
      let { data } = await CollectApi.likeCancel({
        CurrentUserAccount: user.UserAccount,
        PictureID: v.PictureID,
      });
      if (data.Status != 0) return;
      ctx.emit("update");
    };
    const changeTheme = (v) => {
      closeDialog();
      bus.$emit("search", [{ label: "queryThemeID", value: v.ThemeID }]);
      bus.$emit("changeTheme", v.ThemeName);
    };
    const getLikeNums = (v) => {
      // console.log(v.DianZanUserList)
      if (v.DianZanUserList) {
        return v.DianZanUserList.length;
      }
      return 0;
    };
    const lookBigPic = (e) => {
      //
    };
    const confirmApply = async () => {
      if (!state.resaon) {
        ElNotification({
          type: "error",
          title: "授权",
          message: "请输入申请理由",
        });
        return
      }
      let { data } = await HomeApi.apply({
        AskUserAccount: user.UserAccount,
        ToUserAccount: state.current.UploadUserAccount,
        PictureIDs: state.current.PictureID,
        ApplyReason: state.resaon,
        Is_business: state.isbus
      });
      if (data.Status != 0) return;
      dialogVisible.value = false
      state.isbus = 0
      state.resaon = ''
      ElNotification({
        type: "success",
        title: "授权",
        message: "申请授权成功！",
      });
      ctx.emit("update");
    }
    return {
      getLikeNums,
      lookBigPic,
      Avatar,
      textarea,
      changeTheme,
      collect,
      showDialog,
      closeDialog,
      detail,
      detailImg,
      lookBig,
      imgDown,
      moveImg,
      downLoad,
      navs,
      uncollect,
      like,
      unlike,
      dialogVisible,
      confirmApply,
      state
    };
  },
});
</script>
<style scoped lang="scss">
.wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 15px 5px;
}

.wrapper::after {
  content: "";
  flex-grow: 99999;
}

.navs {
  display: flex;
  margin-top: 20px;

  // justify-content: space-around;
  .item {
    border-radius: 10px;
    border: 1px solid rgb(92, 87, 87);
    padding: 10px 30px;
    margin-right: 10px;

    &:last-child {
      margin: 0;
    }

    cursor: pointer;

    &:hover {
      background: #05a081;
      color: #fff;
    }
  }
}

.wf-item {
  flex-grow: 1;
  margin: 5px;
  position: relative;
  overflow: hidden;
  height: 400px;
}

.wf-item {
  &:hover {
    .mask {
      height: 100%;
    }
  }

  // border-radius: 20px;
  overflow: hidden;

  .wf-img {
    background-size: cover;
    background-position: center;
    min-width: 100%;
    height: 400px;
    cursor: pointer;
  }
}

.mask {
  position: absolute;
  left: 0;
  cursor: pointer;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 0%;
  background: rgba(0, 0, 0, 0.3);

  .collect,
  .like,
  .down {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    // background: #fff;
    text-align: center;
    line-height: 3;

    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      object-fit: cover;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  .person {
    position: absolute;
    left: 20px;
    bottom: 10px;
    display: flex;
    align-items: center;

    .avatar {
      width: 40px;
      height: 40px;

      img {
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
      }

      margin-right: 10px;
    }

    .name {
      font-size: 14px;
      color: #fff;
      font-weight: 600;
    }
  }

  .collect {
    top: 20px;
    right: 70px;
  }

  .like {
    top: 20px;
    right: 20px;
  }

  .down {
    bottom: 10px;
    right: 20px;
  }
}

.dialog {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  left: 0%;
  overflow: auto;
  top: 0%;
  background: rgba(0, 0, 0, 0.5);

  .close {
    position: fixed;
    left: 2%;
    top: 2%;
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
    }
  }

  .inner {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    // height: 1000px;
    margin: 2% auto;
    padding: 20px;

    .header {
      display: flex;
      justify-content: space-between;

      .right {
        display: flex;

        >div {
          &:first {
            flex: 1;
          }

          padding: 4px 16px;
          border: 1px solid #dcdcdc;
          border-radius: 5px;
          font-size: 18px;
          text-align: center;
          // line-height: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 8px;
          font-weight: 600;
          cursor: pointer;

          img {
            vertical-align: middle;
            width: 20px;
            object-fit: cover;
          }

          &:hover {
            background: #05a081;
            color: #fff;
          }
        }
      }
    }

    .picbox {
      cursor: url(@/assets/icon/search1.png), default;
      margin-top: 20px;
      text-align: center;
      overflow-y: scroll;
      height: 600px;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        background-color: rgb(241, 241, 241);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        background-color: #c4c2cb;
        border-radius: 10px;
      }

      .normal {
        margin-top: 50px;
        height: 600px;
        object-fit: cover;
      }

      .big {
        width: 100%;
        object-fit: cover;
        transition: all 0.1s;
      }
    }
  }
}

.list {
  padding: 20px;
  display: flex;
  justify-content: space-around;
}

.list .list-half {
  height: 100%;
  flex: 1;
  margin-right: 20px;

  &:last-child {
    margin-right: 0;
  }

  box-sizing: border-box;

  .item {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    width: 100%;
    // height: 100%;
    max-height: 400px;

    &:hover {
      .mask {
        height: 99%;
      }
    }
  }
}

.list-half .card {
  position: relative;
  overflow: hidden;
  width: 100%;
  // height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.tips {
  // margin: 50px 300px;
  margin: 50px auto;
  width: 70%;

  .module {
    display: flex;
    justify-content: space-between;

    .tags {
      flex: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;

      // align-items: center;
      .item {
        margin-right: 10px;
      }
    }

    .right {
      flex: 1;
      text-align: left;
    }

    .desc {
      flex: 2;
      margin-top: 40px;
      display: flex;
      align-items: flex-end;
    }
  }
}
</style>
